<template>
  <div class="video">
    <video
      v-if="monitor.url"
      ref="video"
      crossorigin="anonymous"
      autoplay
      muted
      disablePictureInPicture
      :style="{ filter: offline ? 'invert(1)' : 'none' }"
    >
      <source :src="monitor.url" type="application/x-mpegURL" />
    </video>
    <div v-else class="error">
      <i class="el-icon-loading" style="font-size: 20px" />
      <span>设备不在线</span>
    </div>
    <i class="el-icon-refresh-right" @click="init" />
    <div class="title">终端名称：{{ monitor.title }}</div>
    <div class="name">终端代码: {{ monitor.code }}</div>
  </div>
</template>

<script>
export default {
  props: {
    monitor: {
      type: Object,
      default: () => ({ url: '', title: '', code: '' })
    }
  },
  data() {
    return {
      offline: false
    }
  },
  methods: {
    init() {
      fetch(this.monitor.url)
        .then(r => r.text())
        .then(m3u8 => (this.offline = m3u8.includes('404_0.ts')))
      this.monitor.url && videojs(this.$refs.video)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/element-variables.scss';

.video {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 12px;
  display: flex;
  align-items: center;
  background: black;
  > div {
    margin: auto;
    &:first-child,
    video {
      width: 100%;
      height: calc(100% - 6px);
    }
    >>> .vjs-loading-spinner {
      &:after,
      span {
        display: none;
      }
    }
  }
}

.el-icon-refresh-right,
.title,
.name {
  position: absolute;
  top: 16px;
  left: 16px;
  color: $--color-primary;

  &.el-icon-refresh-right {
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
  }

  &.title {
    left: unset;
    right: 16px;
  }

  &.name {
    top: unset;
    bottom: 16px;
  }
}

.error {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  color: $--color-danger;
}
</style>
